<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/story.css">
    <script src="js/utils.js"></script>
    <script src="js/tool.js"></script>
    <script src="js/story.js"></script>

    <title>Document</title>
</head>

<body>
    <!-- 头部导航 -->
    <div class="header">
        <a href="innisfree.html" class="logPage"><img src="imgs/logo.png" alt=" "></a>
        <div class="userInfoBox">
            <!-- 登录前 -->
            <div class="Userinfo" style="display:none">
                <div class="Userinfo-u1">
                    <div class="Userinfo-u1-welcome">Hey,</div>
                    <div class="Userinfo-u1-login">登录</div>
                    <div class="Userinfo-u1-regist">注册</div>
                </div>
                <div class="Userinfo-u2">
                    <div class="Userinfo-u2-welcome">Hey</div>
                    <div class="Userinfo-u2-loginBox">
                        <div class="Userinfo-u2-login">登录</div>
                        <div class="Userinfo-u2-regist">注册</div>
                    </div>
                    <div class="Userinfo-u2-loctaion">附近暂无门店</div>
                </div>
            </div>
            <!-- 登录后 -->
            <div class="userLoginfo" >
                <div class="userLoginfo-u1">
                    <div class="userLoginfo-u1-welcome">Hey,</div>
                    <div class="userLoginfo-u1-login"></div>
                </div>
                <div class="userLoginfo-u2">
                    <div class="userLoginfo-u2-welcome">Hey,</div>
                    <div class="userLoginfo-u2-loginBox">
                        <div class="userLoginfo-u2-login"></div>
                    </div>
                    <div class="userLoginfo-u2-loctaion">附近暂无门店</div>
                </div>
            </div>
        </div>

        <div class="head-right">
            <div class="search">
                <i class="icon iconfont icon-sousuo"></i>
                <input type="text" placeholder="第四代小绿瓶" class="searchInput">
                <div class="searchBar">
                    <div class="searchBar-box">
                        <div class="searchBar-titleBox">
                            <div class="searchBar-title">热门搜索</div>
                        </div>
                        <div class="searchBar-wordBox">
                            <div class="searchBar-word">小绿瓶</div>
                            <div class="searchBar-word">第小绿瓶</div>
                            <div class="searchBar-word">第四代绿瓶</div>
                            <div class="searchBar-word">第小绿瓶</div>
                            <div class="searchBar-word">第四代小绿瓶</div>
                            <div class="searchBar-word">四代小绿瓶</div>
                            <div class="searchBar-word">第四代瓶</div>
                            <div class="searchBar-word">第四绿瓶</div>
                            <div class="searchBar-word">第四瓶</div>
                            <div class="searchBar-word">第四代绿瓶</div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="hearderNav clearfix">
                <li><a href="innisfree.html">购物</a></li>
                <li><a href="active.html">热门活动</a></li>
                <li><a href="story.html">关于我们</a></li>
            </ul>
        </div>
    </div>


    <div class="page">
        <div class="aboutAside-content">
            <div class="left-nav">
                <ul>
                    <li data-name="intro"><span>品牌介绍</span></li>
                    <li data-name="project"><span>公益项目</span></li>
                    <li data-name="jzd"><span>济州岛故事</span></li>
                    <li data-name="join"><span>加入我们</span></li>
                </ul>
            </div>
            <div class="aboutAside-main">
                <div class="main-item intro show">
                    <div class="ins-title">
                        <div class="title-nameE">BRAND INTRODUCTION</div>
                        <div class="title-name">品牌介绍</div>
                    </div>
                    <div class="ins-main-content">
                        <img src="imgs/brand_pc.jpg" alt="">
                        <div class="brandStory-video video1">
                            <video controls="controls" src="videos/brand1.mp4" class="video"></video>
                        </div>
                        <div class="brandStory-video video2">
                            <video controls="controls" src="videos/brand2.mp4" class="video"></video>
                        </div>
                        <div class="brandStory-video video3">
                            <video controls="controls" src="videos/brand3.mp4" class="video"></video>
                        </div>
                    </div>

                </div>
                <div class="main-item project">
                    <div class="ins-title">
                        <div class="title-nameE">PUBLIC WELFARE PROGRAM</div>
                        <div class="title-name">公益项目</div>
                    </div>
                    <div class="ins-main-content">
                        <ul class="project-tabs clearfix">
                            <li data-name="huanbao" class="active">环保手帕</li>
                            <li data-name="senlin">悦诗风吟公益林</li>
                            <li data-name="tushuguan">绿色爱心图书馆</li>
                            <li data-name="qixing">绿色公益骑行</li>
                        </ul>
                        <div class="project-items">
                            <div class="project-item huanbao show">
                                <img src="imgs/handkerchief.png" alt="">
                            </div>
                            <div class="project-item senlin">
                                <img src="imgs/forest.png" alt="">
                            </div>
                            <div class="project-item tushuguan ">
                                <img src="imgs/library.png" alt="">
                            </div>
                            <div class="project-item qixing ">
                                <img src="imgs/cycling.png" alt="">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="main-item jzd">
                    <div class="ins-title">
                        <div class="title-nameE">JEJU ISLAND HOME</div>
                        <div class="title-name">济州岛之家</div>
                    </div>
                    <div class="ins-main-content">
                        <ul class="jzd-tabs clearfix">
                            <li data-name="jizhouhome" class="active">介绍济州之家</li>
                            <li data-name="yuanfen">济州岛的缘分</li>
                            <li data-name="jianzhu">建筑故事</li>
                            <li data-name="liaoli">料理故事</li>
                            <li data-name="laifang">来访路线</li>
                        </ul>
                        <div class="jzd-items">
                            <div class="jzd-item jizhouhome show">
                                <img src="imgs/jejuHouse.png" alt="">
                            </div>
                            <div class="jzd-item yuanfen">
                                <img src="imgs/jejuFate.png" alt="">
                            </div>
                            <div class="jzd-item jianzhu ">
                                <img src="imgs/jejuBuilding.png" alt="">
                            </div>
                            <div class="jzd-item liaoli ">
                                <img src="imgs/jejuStory.png" alt="">
                            </div>
                            <div class="jzd-item laifang ">
                                <img src="imgs/jejuRoute.png" alt="">
                            </div>
                        </div>
                    </div>


                </div>
                <div class="main-item join">
                    <div class="ins-title">
                        <div class="title-nameE">JOIN US</div>
                        <div class="title-name">加入我们</div>
                    </div>
                    <div class="ins-main-content">
                        <img src="imgs/joinUs.jpg" alt="">
                    </div>
                </div>
            </div>

        </div>
    </div>


    <!-- footer -->
    <footer>
        <div class="footer-content">
            <div class="innBig">
                <img src="imgs/logow.png" alt="" class="ins-appFoot-logo">
                <div class="ins-wq">
                    <div class="ins-app-weibo">
                        <img src="imgs/weibo.png" alt="">
                    </div>
                    <div class="ins-app-weixin">
                        <img src="imgs/weixin.png" alt="">
                        <div class="wxShow">
                            <img src="imgs/wx-code.png" alt="">
                        </div>
                    </div>
                    <div class="ins-app-shop">
                        <img src="imgs/shop.png" alt="">
                        <div class="shopTip">
                            <p>专卖店导航</p>
                            <p>探店指南</p>
                        </div>
                    </div>

                </div>
                <div class="ins-app-copyRight">
                    <img src="imgs/badge.png" alt="">
                    <div class="ins-app-copyRight-Tip"> copyright@2011 amorerepacific corporation. All rights reserved
                    </div>
                </div>
            </div>
            <div class="code">
                <div class="ins-appCode">
                    <img src="imgs/wechatqr.png" alt="">
                    <span>Innisfree公众号</span>
                </div>
                <div class="ins-appCode">
                    <img src="imgs/wechatmp.png" alt="">
                    <span>Innisfree商城小程序</span>
                </div>
            </div>
            <div class="ins-list">
                <div class="ins-list-map clearfix">
                    <ul class="list-map1">
                        <li class="tt">联系我们</li>
                        <li>服务热线：400-920-9238</li>
                        <li>服务时间：09:00-21:00 （不含国定假日）</li>
                        <li>客服邮箱：innisfree@innisfree.cn</li>
                    </ul>
                    <ul class="list-map2">
                        <li class="tt">会员中心</li>
                        <li> 加入会员 </li>
                        <li><a href="/faq/vipService"> 会员制度 </a></li>
                        <li><a href="/userInfo">我的主页</a></li>
                    </ul>
                    <ul class="list-map3">
                        <li class="tt">客服中心</li>
                        <li><a href="/faq/index">公告板</a></li>
                        <li><a href="/faq/instructions">使用说明</a></li>
                        <li><a href="/faq">FAQ</a></li>
                    </ul>
                </div>
                <div class="ins-list-copy">
                    <a href="">
                        <img src="imgs/gongan.png" alt="">
                        <span class="mr-xl"> 沪公网安备 31010602000985</span>
                        <span class="mr-xl">隐私政策</span>
                    </a>
                    <a href="">
                        <img src="imgs/gongshang.png" alt="">
                    </a>
                    <a href="">
                        <span class="mr-xl">沪ICP备11011083</span>
                    </a>
                </div>
            </div>
        </div>

    </footer>
    <!-- 右侧返回顶部 -->
    <div class="cornerMark">
        <div class="cornerMark-item is-bg">
            <img src="imgs/earphone.png" alt="" class="earphone">
        </div>
        <div class="cornerMark-item cor-top" style="display: none;">
            <img src="imgs/icon_top.png" alt="">
        </div>
    </div>


    <!-- 登录弹窗 -->
    <div class="bp-widget-zzc" style="display: none;">
        <div class="bp-widegt-content">
            <div class="bq-title">会员登录</div>
            <i class="close">&times;</i>
            <div class="bq-tabBox clearfix">
                <li data-name="passLogin" class="ins-auth_tab active">密码登录</li>
                <li data-name="messLogin" class="ins-auth_tab">短信登录</li>
            </div>
            <!-- 密码登录 -->
            <div class="loginItem passLogin show">
                <div class="formBox">
                    <div class="formItem">
                        <div class="ins-auth-lable">账号：</div>
                        <input placeholder="请输入邮箱地址或手机号" type="text" class="ins-auth__input">
                    </div>
                    <div class="formItem">
                        <div class="ins-auth-lable">密码：</div>
                        <input type="password" class="ins-auth__input password">
                    </div>
                </div>
                <div class="text-center">
                    <button class="confirm">登录</button>
                </div>
                <div class="linkBox">
                    <span class="login-link">找回密码</span>
                    <span class="login-link" style="margin: 0;">注册新用户</span>
                </div>
                <div class="quickLogin">
                    <div class="sign-login">快捷登录<span><img src="imgs/right.png" alt=""></span></div>
                    <i class="login-logo icon iconfont icon-weixin"></i>
                    <i class="login-logo icon iconfont icon-zhifubaozhifu"></i>
                    <i class="login-logo icon iconfont icon-weibo"></i>
                    <i class="login-logo icon iconfont icon-QQ"></i>
                </div>


            </div>
            <!-- 短信登录 -->
            <div class="loginItem messLogin">
                <div class="formBox">
                    <div class="formItem">
                        <div class="ins-auth-lable">手机号：</div>
                        <input type="text" class="ins-auth__input">
                    </div>
                    <div class="formItem">
                        <div class="ins-auth-lable">图形验证：</div>
                        <input type="text" class="ins-auth__input is-captcha">
                        <div class="ins-captcha">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="ins-captchaTip">
                            <p>看不清？</p>
                            <p>换一张</p>
                        </div>
                    </div>
                    <div class="formItem">
                        <div class="ins-auth-lable">验证码：</div>
                        <input type="password" class="ins-auth__input is-code">
                        <button class="getCode">获取验证码</button>
                    </div>
                </div>
                <div class="text-center">
                    <button class="confirm">登录</button>
                </div>
                <div class="linkBox">
                    <span class="login-link" style="margin: 0;">注册新用户</span>
                </div>
                <div class="quickLogin">
                    <div class="sign-login">快捷登录<span><img src="imgs/right.png" alt=""></span></div>
                    <i class="login-logo icon iconfont icon-weixin"></i>
                    <i class="login-logo icon iconfont icon-zhifubaozhifu"></i>
                    <i class="login-logo icon iconfont icon-weibo"></i>
                    <i class="login-logo icon iconfont icon-QQ"></i>
                </div>


            </div>
        </div>
    </div>

    <!-- 注册弹窗 -->
    <div class="rg-widget-zzc" style="display: none;">
        <div class="rg-widegt-content">
            <i class="close">&times;</i>
            <img src="imgs/Register.png" alt="">
        </div>
    </div>
</body>

</html>